<template>
  <div>
    <ul>
      <li v-for="s in scenicList" :key="s.id">
        <!-- 写法1：跳转路由并传递 params 参数，to 的字符串写法 -->
        <!-- <router-link :to="`/travel/shenzhen/detail/${s.id}/${s.name}`">{{
          s.name
        }}</router-link> -->

        <!-- 写法2：跳转路由并传递 params 参数，to 的对象写法 -->
        <router-link
          replace
          :to="{
            name: `shenzhenDetail`,
            //使用 params 写法不能使用 path 的方式
            //path: `/travel/shenzhen/detail`,
            params: {
              id: s.id,
              name: s.name,
            },
          }"
        >
          {{ s.name }}
        </router-link>
        &nbsp;<button @click="pushShow(s)">push模式查看</button>
      </li>
    </ul>
    <hr />
    <!-- 临时展示数据结果 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Shenzhen",
  data() {
    return {
      //景点数组集合
      scenicList: [
        { id: "shenzhenwan", name: "深圳湾公园" },
        { id: "huanle", name: "深圳欢乐港湾" },
        { id: "dameisha", name: "大梅沙公园" },
      ],
    };
  },
  methods: {
    pushShow(s) {
      this.$router.push({
        name: `shenzhenDetail`,
        params: {
          id: s.id,
          name: s.name,
        },
      });
    },
  },
};
</script>